<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子组件向父组件传值</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
</head>
<body>
    <div id="app" style="margin: 100px; text-align: center;">
        <template id="app">
            <h1 style="text-align: center;"> {{ quantity }}</h1>            <div>
            <button @click="increaseQuantity" style="width: 100px; height: 50px;">增加1</button>  
            <button @click="decreaseQuantity" :disabled="quantity <= 0" style="width: 100px; height: 50px;">减小1</button>
            </div>
        </template>
    </body>
    <script>  
        // 创建Vue实例  
        new Vue({  
            el: '#app', // 挂载到id为app的元素上  
            data: {  
                quantity: 0 // 初始数量  
            },  
            methods: {  
                increaseQuantity() {  
                    this.quantity++;  
                },  
                decreaseQuantity() {  
                    if (this.quantity > 0) {  
                        this.quantity--;  
                    }  
                }  
            }  
        });  
        </script>  
</body>
</html>